<template>
  <div class="blindbox-container">
    <!-- 顶部横幅 -->
    <div class="banner">
      <h1>盲盒抽奖商城</h1>
      <div class="user-info">
        <span>余额: {{ userBalance }}元</span>
        <el-button type="primary" size="small" @click="recharge">充值</el-button>
      </div>
    </div>

    <!-- 盲盒展示区 -->
    <div class="box-container">
      <el-row :gutter="20">
        <el-col :span="6" v-for="box in blindBoxes" :key="box.id">
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div class="box-image">
              <img :src="box.image" :alt="box.name">
              <div class="price-tag">￥{{ box.price }}</div>
            </div>
            <div class="box-info">
              <h3>{{ box.name }}</h3>
              <p>{{ box.description }}</p>
              <div class="probability">
                <span v-for="(prob, index) in box.probability" :key="index"
                  :class="['prob-item', `prob-${prob.level}`]">
                  {{ prob.level }}: {{ prob.rate }}%
                </span>
              </div>
              <el-button type="danger" round @click="openBox(box)">立即抽奖</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 抽奖结果弹窗 -->
    <el-dialog
      title="抽奖结果"
      :visible.sync="dialogVisible"
      width="30%"
      center>
      <div class="result-container" v-if="currentPrize">
        <div class="prize-animation">
          <img :src="currentPrize.image" :alt="currentPrize.name">
        </div>
        <h2>恭喜获得</h2>
        <h3>{{ currentPrize.name }}</h3>
        <p>{{ currentPrize.description }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BlindStore',
  data() {
    return {
      userBalance: 1000,
      dialogVisible: false,
      currentPrize: null,
      blindBoxes: [
        {
          id: 1,
          name: "动漫限定盲盒",
          price: 29.9,
          image: "https://via.placeholder.com/200x200",
          description: "收录多款热门动漫角色手办",
          probability: [
            { level: "SSR", rate: 1 },
            { level: "SR", rate: 10 },
            { level: "R", rate: 89 }
          ]
        },
        {
          id: 2,
          name: "潮玩限定盲盒",
          price: 39.9,
          image: "https://via.placeholder.com/200x200",
          description: "潮流玩具收藏家必备",
          probability: [
            { level: "SSR", rate: 2 },
            { level: "SR", rate: 18 },
            { level: "R", rate: 80 }
          ]
        },
        {
          id: 3,
          name: "萌宠系列盲盒",
          price: 19.9,
          image: "https://via.placeholder.com/200x200",
          description: "可爱萌宠手办系列",
          probability: [
            { level: "SSR", rate: 3 },
            { level: "SR", rate: 27 },
            { level: "R", rate: 70 }
          ]
        },
        {
          id: 4,
          name: "节日限定盲盒",
          price: 49.9,
          image: "https://via.placeholder.com/200x200",
          description: "特别节日主题限定款",
          probability: [
            { level: "SSR", rate: 5 },
            { level: "SR", rate: 15 },
            { level: "R", rate: 80 }
          ]
        }
      ]
    }
  },
  methods: {
    recharge() {
      this.$prompt('请输入充值金额', '充值', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d+$/,
        inputErrorMessage: '请输入正确的金额'
      }).then(({ value }) => {
        this.userBalance += Number(value)
        this.$message({
          type: 'success',
          message: `成功充值${value}元`
        })
      })
    },
    openBox(box) {
      if (this.userBalance < box.price) {
        this.$message.error('余额不足，请先充值')
        return
      }
      
      this.userBalance -= box.price
      
      // 模拟抽奖
      const random = Math.random() * 100
      let level
      if (random < box.probability[0].rate) {
        level = 'SSR'
      } else if (random < box.probability[0].rate + box.probability[1].rate) {
        level = 'SR'
      } else {
        level = 'R'
      }
      
      // 模拟奖品
      this.currentPrize = {
        name: `${level}级${box.name}奖品`,
        image: "https://via.placeholder.com/200x200",
        description: `恭喜获得${level}级奖品！`
      }
      
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.blindbox-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.banner {
  background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
  padding: 20px;
  border-radius: 10px;
  color: white;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.box-container {
  margin-top: 20px;
}

.box-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  border-radius: 15px;
  overflow: hidden;
}

.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.box-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,0,0,0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
}

.box-info {
  padding: 15px;
  text-align: center;
}

.probability {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.prob-item {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.prob-SSR {
  background: #ffd700;
  color: #000;
}

.prob-SR {
  background: #c0c0c0;
  color: #000;
}

.prob-R {
  background: #cd7f32;
  color: #fff;
}

.result-container {
  text-align: center;
}

.prize-animation {
  margin: 20px auto;
  width: 200px;
  height: 200px;
  animation: bounce 1s ease infinite;
}

.prize-animation img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
</style>
